<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Example</title>
		<!-- <script src="https://webapi.amap.com/loader.js"></script> -->
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			html,
			body {
				width: 100%;
				height: 100%;
			}

			#container {
				width: 100%;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<div id="my-panel"></div>
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: '3a06f860bef05b3a1ccc723e13ad3f75'
			};
		</script>
		<script src="https://webapi.amap.com/loader.js"></script>
		<script type="text/javascript">
			AMapLoader.load({
				key: '7dc78176646b946eaa970c21a72f47c4', //申请好的Web端开发者key，调用 load 时必填
				version: '2.0' //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
			})
				.then((AMap) => {
					//JS API 加载完成后获取AMap对象
					const map = new AMap.Map('container', {
						viewMode: '2D', //默认使用 2D 模式
						zoom: 11, //地图级别
						center: [116.397428, 39.90923] //地图中心点
					});
					//异步加载控件
					AMap.plugin('AMap.ToolBar', function () {
						var toolbar = new AMap.ToolBar(); //缩放工具条实例化
						map.addControl(toolbar); //添加控件
					});
					// toolbar.show(); //缩放工具展示
					// toolbar.hide(); //缩放工具隐藏
					AMap.plugin(['AMap.PlaceSearch'], function () {
						const placeSearch = new AMap.PlaceSearch({
							pageSize: 5, //单页显示结果条数
							pageIndex: 1, //页码
							city: '010', //兴趣点城市
							citylimit: false, //是否强制限制在设置的城市内搜索
							map: map, //展现结果的地图实例
							panel: 'my-panel', //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
							autoFitView: true //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
						});
						placeSearch.search('沈阳市'); //使用插件搜索关键字并查看结果
					});
				})
				.catch((e) => {
					console.error(e); //加载错误提示
				});
		</script>
		<!-- <script>
			const location = '414811.75,1232531.18';
		</script> -->
	</body>
</html>
